﻿<template id="@(ViewBag.PageTemplate)">
    <div class="layout-page-content">
        <single_table :api="`${path}/getdata`" :is-tree="true" :border="true" row-key="Id" :search-columns="searchColumns" ref="tableRef">
            <template #header-left="scope">@(Html.Raw(ViewBag.PageFuncs("tools")))</template>
            <template #default>
                <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                <el-table-column prop="Title" label="菜单名称" width="200"></el-table-column>
                <el-table-column label="图标" width="120" align="center">
                    <template #default="scope">
                        <el-icon><component :is="scope.row.Icon"></component></el-icon>
                    </template>
                </el-table-column>
                <el-table-column label="类型" width="120" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.Type=='null'">目录</el-tag>
                        <el-tag v-else-if="scope.row.Type=='href'">链接</el-tag>
                        <el-tag v-else-if="scope.row.Type=='iframe'" type="success">外链</el-tag>
                        <el-tag v-else-if="scope.row.Type=='dialog'" type="warning">弹窗</el-tag>
                        <el-tag v-else-if="scope.row.Type=='child'" type="danger">子页</el-tag>
                        <el-tag v-else type="info">其他</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="Src" label="链接地址" width="450"></el-table-column>
                <el-table-column label="状态" width="120" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.Status=='ok'" type="success">启用</el-tag>
                        <el-tag v-else type="info">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="Sequence" label="排序" width="120" align="center"></el-table-column>
                <el-table-column prop="CreateTime" label="创建时间" width="220" align="center"></el-table-column>

                <single_table_operation>
                    <template #default="scope">@(Html.Raw(ViewBag.PageFuncs("table")))</template>
                </single_table_operation>
            </template>
        </single_table>
        <component is="@(ViewBag.GetCompName("form"))" ref="formRef" v-on:refresh="refresh"></component>
        <component is="@(ViewBag.GetCompName("assign"))" ref="assignRef"></component>
    </div>
</template>
@await Html.PartialAsync("Form")
@await Html.PartialAsync("Assign")
<script type="text/javascript">
    var @(ViewBag.PageName) = {
        template: "#@(ViewBag.PageTemplate)", data() {
            return {
                path: "@(ViewBag.PagePath)",
                searchColumns: [
                    { title: "菜单名称", prop: "title" },
                    { title: "链接地址", prop: "src" }
                ]
            }
        },
        components: { @(ViewBag.GetCompName("form")), @(ViewBag.GetCompName("assign")) },
        methods: {
            init(){
                var that = this;
            },
            refresh(){
                this.$refs.tableRef.loadData();
            },
            form(title, row){
                this.$refs.formRef.open(title, row);
            },
            del(ids){
                app.func.delete(`${this.path}/delete`, ids, this.refresh);
            },
            assign(row){
                this.$refs.assignRef.open(row);
            }
        },
        mounted() { this.init(); }
    };
</script>